from volcenginesdkarkruntime import Ark

client = Ark(
    api_key="780242c1-b80a-43d1-b5a1-fcc5bea20248",
    base_url="https://ark.cn-beijing.volces.com/api/v3"
)


def generate_vue_component(prompt):
    response = client.chat.completions.create(
        model="deepseek-r1-250120",
        messages=[
            {"role": "system", "content": """你是一个专业的前端架构师，请将以下AngularJS代码转换为Vue 2格式，
            其中遇到$http时使用fetch替换
            其中遇到baseService时使用axios替换
            其中遇到$sessionStorage时使用sessionStorage替换
            其中遇到$scope.pageParam时使用vue中的props替换
            注意：用户输入的angularjs中的html代码按照我下面的模板代码转换成vue2，并且将代码放到el-dialog中，el-form和el-col不用变
            其中遇到ht-tree使用orgTree替换
            其中遇到input使用ht-input替换
            其中遇到select使用ht-select替换,并且放在ht-form-item中，依此类推
            <template>
              <el-dialog
                :title="dlg.title"
                :visible.sync="dlg.show"
                :width="width"
                :top="top"
                :close-on-click-modal="false"
                :before-close="handleClose">
                <div>
                  <el-form class="clearfix" :disabled="action === 'view'" v-form data-vv-scope="dlgForm">
                    <template v-if="action === 'edit'">
                      <el-col :span="12" class="com-control-warp">
                        <ht-form-item label="维护人组织">
                          <org-tree
                            v-model="dlgForm.divideId"
                            validate="required"
                            :global="false"
                            @input="handleOrgChange"
                          />
                        </ht-form-item>
                      </el-col>
                      <el-col :span="12" class="com-control-warp">
                        <ht-form-item label="维护人" >
                          <ht-select
                            v-model="dlgForm.followUpId"
                            placeholder="请选择"
                            style="width: 100%"
                            :options="followUpList"
                            :props="{ key: 'key', value: 'name' }"
                            required
                          />
                        </ht-form-item>
                      </el-col>
                    </template>

                    <el-col :span="12" class="com-control-warp">
                      <ht-form-item label="重点客户类型" label-width="130px">
                        <ht-select
                          ref="mainCustomerTypeRef"
                          v-model="dlgForm.mainCustomerType"
                          placeholder="请选择"
                          style="width: 100%"
                          :options="mainCustomerTypeList"
                          :props="{key:'key',value:'name'}"
                          validate='required'
                        />
                      </ht-form-item>
                    </el-col>
                    <el-col :span="12" class="com-control-warp">
                      <ht-form-item label="客户性别" label-width="130px">
                        <ht-select v-model="dlgForm.sex"
                                   placeholder="请选择"
                                   style="width: 100%"
                                   :options="[{key: '0', value: '男'},{key: '1', value: '女'}]"
                                   validate='required'>
                        </ht-select>
                      </ht-form-item>
                    </el-col>

                    <el-col :span="12" class="com-control-warp">
                      <ht-form-item label="客户年龄" label-width="130px">
                        <ht-select v-model="dlgForm.age"
                                   placeholder="请选择"
                                   style="width: 100%"
                                   :options="[{key: '30以内', value: '30以内'},
                                   {key: 1, value: '30-40'},
                                   {key: 1, value: '40-50'},
                                   {key: 1, value: '50以上'}]">
                        </ht-select>
                      </ht-form-item>
                    </el-col>
                    <el-col :span="12" class="com-control-warp">
                      <ht-form-item label="客户名称" label-width="130px">
                        <ht-input
                          v-model="dlgForm.customerName"
                          validate="required"
                          style="width: 100%"
                          :maxlength="30"
                        />
                      </ht-form-item>
                    </el-col>

                    <el-col :span="12" class="com-control-warp">
                      <ht-form-item label="客户电话" label-width="130px">
                        <ht-input
                          v-model="dlgForm.customerMobile"
                          validate="required"
                          style="width: 100%"
                          :maxlength="15"
                        />
                      </ht-form-item>
                    </el-col>
                    <el-col :span="12" class="com-control-warp">
                      <ht-form-item label="客户所属单位" label-width="130px">
                        <ht-input v-model="dlgForm.companyName" style="width: 100%" :maxlength="100" />
                      </ht-form-item>
                    </el-col>

                    <el-col :span="24" class="com-control-warp">
                      <ht-form-item label="单位地址" label-width="130px">
                        <ht-input
                          v-model="dlgForm.companyAddr"
                          type="textarea"
                          style="width: 100%"
                          :maxlength="300"
                        />
                      </ht-form-item>
                    </el-col>

                    <template v-if="action === 'add'">
                      <div class="form-group">
                        <el-col :span="24">
                          <el-button type="success" @click="addCustomerInfo">添加维护人</el-button>
                        </el-col>
                      </div>
                      <div v-for="(item, index) in assistChargePeopleList" :key="index" class="form-group">
                        <el-col :span="12">
                          <ht-form-item :label="`维护人组织${index + 1}`">
                            <ht-input v-model="item.orgName" readonly />
                          </ht-form-item>
                        </el-col>
                        <el-col :span="8">
                          <ht-form-item label="维护人">
                            <ht-input v-model="item.followUpName" readonly />
                          </ht-form-item>
                        </el-col>
                        <el-col :span="4">
                          <el-button type="danger" @click="deleteLeadMan(index)">删除</el-button>
                        </el-col>
                      </div>
                    </template>
                  </el-form>
                </div>

                <span slot="footer" class="dialog-footer">
                  <el-button @click="onCancel">取消</el-button>
                  <ht-submit-button
                    :url="url"
                    :model="saveForm"
                    :request-method="method"
                    scope-name="dlgForm"
                    @after-save-data="afterSaveData"
                    @before-save-data="beforeSaveData">
                    保存
                  </ht-submit-button>
                </span>
              </el-dialog>
            </template>

            <script>
            import OrgTree from '@/components/orgTree/OrgTree'
            import axios from 'axios'

            export default {
              components: {
                OrgTree
              },
              props: {
                width: {
                  type: String,
                  default: '50%'
                },
                top: {
                  type: String,
                  default: '15vh'
                },
                pageParam: {
                  type: Object,
                  default: () => ({})
                }
              },
              data() {
                return {
                  dlg: {
                    show: false,
                    title: '标题'
                  },
                  assistChargePeopleList: [],
                  followUpList: [],
                  mainCustomerTypeList: [],
                  currentUser: JSON.parse(sessionStorage.getItem('currentUser')),
                  method: 'POST',
                  url: '',
                  action: '',
                  saveForm: {},
                  dlgForm: {
                    orgCode: '',
                    followUpId: '',
                    customerName: '',
                    mainCustomerType: '',
                    sex: '',
                    age: '',
                    customerMobile: '',
                    companyName: '',
                    companyAddr: '',
                    orgId: '',
                    divideId: ''
                  },
                  openData: {
                    id: '',
                    title: '',
                    action: '',
                    mainCustomerTypeList: []
                  }
                }
              },
              methods: {
                open(data){
                  this.openData = data
                  this.dlg.show = true
                  this.action = data.action
                  this.dlg.title = data.title
                  this.mainCustomerTypeList = data.mainCustomerTypeList
                  this.$nextTick(() => {
                    if (this.$refs.mainCustomerTypeRef?.changeOptions){
                      this.$refs.mainCustomerTypeRef.changeOptions(data.mainCustomerTypeList)
                    }
                  })

                  // this.url = data.action === 'add'? `${resource}/api/resource/v1/careCustomerInfo/addList`
                  //   : `${resource}/api/resource/v1/careCustomerInfo/update`
                },
                onCancel(){
                  this.dlg.show = false
                  this.$emit('onCancel')
                },
                beforeSaveData(cb){
                  console.log('beforeSaveData=',this.dlgForm)
                  cb(false)
                  return
                },
                afterSaveData () {
                  console.log('---afterSaveData---')
                  this.dlg.show = false
                  this.$emit('onSuccess')
                },
                init() {
                  if (this.pageParam.action === 'add') {
                    this.dlgForm = {
                      orgCode: '',
                      followUpId: '',
                      customerName: '',
                      mainCustomerType: '',
                      sex: '',
                      age: '',
                      customerMobile: '',
                      companyName: '',
                      companyAddr: '',
                      orgId: '',
                      divideId: ''
                    }
                  } else {
                    axios.get(`${resource}/api/resource/v1/careCustomerInfo/get/${this.pageParam.id}`).then(res => {
                      this.dlgForm = res.data
                      this.dlgForm.divideId = res.data.orgId
                    })
                  }
                },
                handleOrgChange(org) {
                  this.dlgForm.divideId = org.id
                  this.dlgForm.orgName = org.name
                },
                async loadFollowUpList(divideId) {
                  const params = {
                    pageBean: { page: 1, pageSize: 99999 },
                    querys: [{ property: 'org.ID_', value: divideId }]
                  }
                  const res = await axios.post(`${uc}/api/org/v1/orgUsers/getOrgUserPage`, params)
                  this.followUpList = res.data.rows.map(item => ({ key: item.userId, name: item.fullName }))
                },
                addCustomerInfo() {
                  this.$emit('add-leadman', {
                    orgName: this.dlgForm.orgName,
                    orgId: this.dlgForm.divideId,
                    followUpId: this.dlgForm.followUpId,
                    followUpName: this.getTypeName(this.dlgForm.followUpId, this.followUpList)
                  })
                },
                deleteLeadMan(index) {
                  this.assistChargePeopleList.splice(index, 1)
                },
                async save() {
                  if (this.action === 'add' && !this.assistChargePeopleList.length) {
                    this.$message.error('请添加维护人!')
                    return
                  }

                  const postData = this.action === 'add'
                    ? this.prepareAddData()
                    : this.prepareUpdateData()

                  try {
                    const res = await this.$submitForm(postData)
                    if (res.code === 0) {
                      this.$emit('on-success')
                      this.dlg.show = false
                    }
                  } catch (error) {
                    this.$message.error(error.message)
                  }
                },
                prepareAddData() {
                  return this.assistChargePeopleList.map(item => ({
                    ...item,
                    mainCustomerTypeName: this.getTypeName(this.dlgForm.mainCustomerType, this.mainCustomerTypeList),
                    ...this.dlgForm
                  }))
                },
                prepareUpdateData() {
                  return {
                    ...this.dlgForm,
                    mainCustomerTypeName: this.getTypeName(this.dlgForm.mainCustomerType, this.mainCustomerTypeList),
                    followUpName: this.getTypeName(this.dlgForm.followUpId, this.followUpList)
                  }
                },
                getTypeName(key, list) {
                  const item = list.find(i => i.key === key)
                  return item ? item.name : ''
                },
                handleClose() {
                  this.dlg.show = false
                  this.$emit('on-cancel')
                }
              }
            }
            </script>

            <style scoped>
            .com-control-warp {
              padding: 8px;
            }
            .form-group {
              margin-bottom: 15px;
            }
            </style>


            只输出转换后的代码，不要任何解释"""},
            {"role": "user", "content": prompt}
        ],
        stream=True
    )

    full_content = []
    for chunk in response:
        if chunk.choices:
            content = chunk.choices[0].delta.content
            if content:
                full_content.append(content)

    return "".join(full_content)
# 测试代码
angularjs_code = """
<div class="white-bg border-left animated fadeInRight customerInfoListBox" full-scroll ng-controller="customerInfoEditCtrl" ng-init="init()">
    <div class="row wrapper">
        <div class="ibox">
            <div class="ibox-title no-borders">
                <h5>{{title}}</h5>
             <!--   <div class="ibox-tools">
                    <a ng-click="close()"><i class="fa fa-times"></i></a>
                </div>-->
            </div>
            <div class="ibox-content">
                <form class="form-horizontal" name="myForm" ng-submit="submit()">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">维护人组织<span class="font-colon require"></span></label>
                        <div class="col-sm-4">
                            <input type="text" placeholder="维护人组织" value="{{orgName}}" title="{{orgName}}" id="divideId"
                                aria-required="true" class="form-control input-sm tree-input1" readonly="readonly"
                                ng-click="orgChoice2()" />
                            <input type="text" ng-model="divideId" aria-required="true" required
                                name="divideId" style="display: none;" />
                            <div class="com-tree-item2 ng-hide" style="width: 92%" ng-show="treeShowStatus2">
                                <div class="org-tree-item-row">
                                    <input class="col-md-7 com-tree-input" type="text" ng-model="searchValue2"
                                        ng-change="searchOrg2()">
                                    <button class="btn btn-sm btn-info org-tree-button" ng-click="treeShow2()">关闭
                                    </button>
                                    <button class="btn btn-sm btn-info org-tree-button" ng-click="valClear2()">清除
                                    </button>
                                </div>
                                <div class="col-md-10 no-padding">
                                    <div>
                                        <ul ht-tree="treeConfig2" ng-model="treeData3" tree="treeSubgradeInstance3"
                                            tree-events="onClick:tClick;"></ul>
                                    </div>
                                </div>
                            </div>
                            <span class="warning" style="color: #d30101"
                                ng-show="myForm.divideId.$invalid">请选择分期名称</span>
                        </div>
                        <label class="col-sm-2 control-label">维护人<span class="font-colon require"></span></label>
                        <div class="col-sm-4">
                            <select desc="请选择" required class="form-control none input-sm none" type="text"
                                ng-model="followUpId" name="followUpId"
                                ng-options="x.key as x.name for x in followUpList">
                                <option value="">请选择</option>
                            </select>
                            <span class="warning" style="color: #d30101"
                                ng-show="myForm.followUpId.$invalid">请选择维护人</span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    .col-sm-10 div,
    .p6 div {
        padding: 6px 0;
    }

    .col-sm-10 img {
        max-height: 300px;
        max-width: 400px;
    }

    .see {
        position: relative;
    }

    .detail {
        position: absolute;
        left: 380px;
        background: #24a0b4;
        color: #fff;
        padding: 5px;
        border-radius: 6px;
        cursor: pointer;
        width: 100px;
        text-align: center;
    }

    .shenhe {
        background: #24a0b4;
        color: #fff;
        padding: 5px;
        border-radius: 6px;
        cursor: pointer;
        width: 70px;
        text-align: center;
    }

    .notice-content {
        background: #eee;
        padding: 6px 12px !important;
        border: 1px solid #e5e6e7;
        border-radius: 1px;
        word-break: break-word;
    }

    .notice-content img {
        display: block;
    }

    .moduleTitle {
        font-size: large;
        font-weight: bold;
        color: #545252;
    }
    .customerInfoListBox .com-tree-item {
        width: 265px;
    }
    .customerInfoListBox .org-tree-item-row .org-tree-button {
        margin-right: 0px!important;
    }
</style>
function customerInfoEditCtrl($scope, $compile, baseService, dialogService, $sessionStorage, $rootScope, $http, dataDictService) {

    $scope.formData = {};
    //维护人数组
    $scope.assistChargePeopleList = [];
    $scope.title = $scope.pageParam.title;
    $scope.mainCustomerTypeList = $scope.pageParam.mainCustomerTypeList;
    var currentUser = $sessionStorage.currentUser;
    var currentStagingCode = $sessionStorage.checkOrgInfo;
    $scope.init = function () {
      if ($scope.pageParam.action === 'add') {
        $scope.formData = {
          orgCode: '',
          orgName: '',
          followUpId: '', //维护人Id
          followUpName: '', //维护人名称
          customerName: '', //客户名称
          mainCustomerType: '', //重点客户类型
          companyName: '',
          companyAddr: '',
          orgId: '',
          divideId: '',
          divideName: ''
        }
      } else {
        baseService.get("${resource}/api/resource/v1/careCustomerInfo/get/" + $scope.pageParam.id).then(function (res) {
          if (res) {
            $scope.formData = res;
            $scope.formData.divideId = $scope.formData.orgId;
            $scope.formData.divideName = $scope.formData.orgName;
            $scope.orgName = $scope.formData.orgName;
          }
        })
      }
    }
    // 关闭
    $scope.close = function () {
      dialogService.closeSidebar();
    }
    //获取类型名称
    $scope.handleTypeNme = function(key, list) {
      var name;
      if(list && list.length > 0) {
        list.forEach(item => {
          if(item.key == key) {
            name = item.name;
          }
        })
      }
      return name;
    }

    //添加园区管理人/协助对象
    $scope.addLeadMan = function (formData) {
      var rowData = {
        'orgName':formData.orgName,
        'orgId': formData.orgId,
        'followUpId': formData.followUpId,
        'followUpName':formData.followUpName
      };
      $scope.assistChargePeopleList.push(rowData);
    };

    $scope.addCustomerInfo = function (){
      var title = "添加维护人";
      var pageParam = {
      };
      dialogService.page("system.addCustomerInfo", {
        area: ['40vw', '50vh'],
        btn: ["确认", "取消"],
        title: title,
        alwaysClose: false,
        pageParam: pageParam
      }).then(function (data) {
        console.log(JSON.stringify(data));
        $scope.addLeadMan(data.result);
        var params = {
          pageBean: {page: 1, pageSize: 99999, showTotal: true},
          querys: [
            {group: null,
              operation: "EQUAL",
              property: "org.ID_",
              relation: "AND",
              value: data.result.divideId}
          ]
        }
        //根据分期id获取维护人列表
        baseService.post('${uc}/api/org/v1/orgUsers/getOrgUserPage', params).then(function (resp) {
          if (resp) {
            var followUpList = []
            for (var i = 0; i < resp.rows.length; i++) {
              followUpList.push({key: resp.rows[i].userId, name: resp.rows[i].fullName})
            }
            $scope.followUpList = followUpList;
          }
        });
        dialogService.close(data.index);
      })
    };

    //弹框返回
    $scope.pageSure = function (index) {
      return {
        orgName: $scope.orgName,
        orgId: $scope.divideId,
        followUpId:  $scope.followUpId,
        followUpName: $scope.handleTypeNme( $scope.followUpId, $scope.followUpList)
      }
    };

    //删除维护人
    $scope.deleteLeadMan = function (index) {
      $scope.assistChargePeopleList.splice(index, 1);
    }
    // 保存
    $scope.save = function () {
      console.log("保存")
      console.log($scope.formData)
      $scope.formData.orgId = $scope.formData.divideId;
      $scope.formData.orgName = $scope.formData.divideName;
      $scope.formData.mainCustomerTypeName = $scope.handleTypeNme($scope.formData.mainCustomerType, $scope.mainCustomerTypeList);
      $scope.formData.followUpName = $scope.handleTypeNme($scope.formData.followUpId, $scope.followUpList);
      if ($scope.pageParam.action === 'add') {
        if ($scope.assistChargePeopleList.length==0){
          dialogService.fail("请添加维护人!");
          return
        }      $scope.assistChargePeopleList.forEach(item => {
          item.mainCustomerTypeName=$scope.handleTypeNme($scope.formData.mainCustomerType, $scope.mainCustomerTypeList);
          item.mainCustomerType=$scope.formData.mainCustomerType;
          item.sex=$scope.formData.sex;
          item.age=$scope.formData.age;
          item.customerName= $scope.formData.customerName;
          item.customerMobile=$scope.formData.customerMobile;
          item.companyName=$scope.formData.companyName;
          item.companyAddr=$scope.formData.companyAddr;
        });
        var loadIndex = layer.load(0, {shade: [0.1, '#959595']});
        baseService.post("${resource}/api/resource/v1/careCustomerInfo/addList",  $scope.assistChargePeopleList).then(function (res) {
          layer.close(loadIndex);//关闭loading层
          if (res.code === 0) {
            dialogService.success("保存成功!")
            $scope.close();
            $rootScope.$broadcast("reloadPage")
          }else {
            dialogService.fail(res.message)
          }
        }).finally(function () {
          layer.close(loadIndex);//关闭loading层
        });
      }
      if ($scope.pageParam.action === 'edit') {
        var loadIndex = layer.load(0, {shade: [0.1, '#959595']});
        baseService.put("${resource}/api/resource/v1/careCustomerInfo/update", $scope.formData).then(function (res) {
          layer.close(loadIndex);//关闭loading层
          if (res.code === 0) {
            dialogService.success("保存成功!")
            $scope.close();
            $rootScope.$broadcast("reloadPage")
          }else {
            dialogService.fail(res.message)
          }
        }).finally(function () {
          layer.close(loadIndex);//关闭loading层
        });
      }
    }

    // 房产树
    $scope.decorationTreeConfig = {
      url: '',
      treeConf: {
        check: false
      }
    }
    //监听维护组织
    $scope.$watch('formData.divideId', (newval, oldval) => {
      if (newval) {
        var params = {
          pageBean: {page: 1, pageSize: 99999, showTotal: true},
          querys: [
            {group: null,
              operation: "EQUAL",
              property: "org.ID_",
              relation: "AND",
              value: $scope.formData.divideId}
          ]
        }
        //根据分期id获取维护人列表
        baseService.post('${uc}/api/org/v1/orgUsers/getOrgUserPage', params).then(function (resp) {
          if (resp) {
            var followUpList = []
            for (var i = 0; i < resp.rows.length; i++) {
              followUpList.push({key: resp.rows[i].userId, name: resp.rows[i].fullName})
            }
            $scope.followUpList = followUpList;
          }
      });
        // 只要分期换了，都要把装修状态和装修房产置空
        // $scope.decorationTreeConfig.url = "${mdm}/api/mdm/v1/divide/resource/getTreeList?divideId=" + $scope.divideId
        // "${mdm}/api/mdm/v1/divide/resource/getTreeList?divideId=" + $scope.divideId

      }
    });
    //region 组织树
    //组织树开始------------------------------------
    $scope.treeShowStatus2 = false;
    $scope.massifName;
    $scope.massifId;
    $scope.selOrgName;
    $scope.orgDikuaiId;
    $scope.treeConfig2 = {
      data: {
        simpleData: {
          enable: true,
          idKey: "id",
          pIdKey: "parentId",
          rootPId: 0
        }
      }
    };

    //左键菜单点击前事件
    $scope.tClick = function (e, i, n) {
      if (n.path) {
        if (null == n.grade || !"organization_type_divide" == n.grade) {
          dialogService.warn("请选择分期");
          return;
        } else {
          if ($scope.divideId !== n.id) {
            $scope.formData.houseCode = "";
            $scope.formData.houseId = "";
            $scope.formData.arrearsFlag = "";
            $rootScope.$broadcast("deleteHouseCode")
          }
          $scope.orgName=n.name;
          $scope.formData.divideName = n.name;
          $scope.divideId = n.id;
          $scope.formData.divideId = n.id;
          $scope.formData.orgCode = n.code;
          $scope.treeShowStatus2 = false;
        }
      }
    };

    $scope.orgChoice2 = function () {
      $scope.treeShowStatus2 = true;
    };

    // 下拉框关闭
    $scope.treeShow2 = function () {
      $scope.searchValue2 = "";
      $scope.treeShowStatus2 = false;
    };

    //清除
    $scope.valClear2 = function () {
      $scope.searchValue2 = "";
      $scope.orgName = "";
      $scope.formData.divideName = ""
      $scope.treeShowStatus2 = false;
      $scope.formData.divideId = ""
      $scope.formData.houseCode = ""
      $scope.formData.houseId = ""
      $scope.formData.arrearsFlag = ""
      $scope.searchOrg2();
    };

    //点击其他地方隐藏树
    $("body").click(function (e) {
      if ($(e.target).closest(".com-tree-item").length > 0 || $(e.target).closest(".form-control").length > 0) {
      }
      if ($(e.target).closest(".com-tree-item2").length == 0 && $(e.target).closest(".tree-input1").length == 0) {
        $scope.treeShowStatus2 = false;
      }
    });

    $scope.getTreeData2 = function () {
      $scope.treeData = [];
      baseService.get("${uc}/api/org/v1/org/getUserAuthOrg?userId=" + currentUser.userId + "&isTree=1&demCode=").then(function (respFull) {
        if (respFull && respFull.length > 0) {
          var dataList = [];
          for (var i = 0; i < respFull.length; i++) {
            var item = respFull[i];
            dataList.push({
              id: item.id,
              parentId: item.parentId,
              code: item.code,
              grade: item.grade,
              name: item.name,
              path: item.path,
              demId: item.demId,
              orderNo: item.orderNo,
              disabled: item.disabled
            });
          }
          $scope.treeData3 = dataList;
        }
      });
    };

    $scope.searchOrg2 = function () {
      searchArea2();
    };

    function searchArea2() {
      // 定义搜索方法
      search_keyword($scope.treeSubgradeInstance3, $scope.searchValue2);
    }

    if (currentUser && currentUser.userId) {
      $scope.getTreeData2();
    }

    //组织树结束-----------------------------------
  }
"""

vue_code = generate_vue_component(angularjs_code)
print("转换后的Dlg Vue代码：\n")
print(vue_code)
